<template>
  <el-dialog v-model="deleteVisible" :title="title" width="80%" align-center class="public-dialog" @close="cancel"
    :close-on-click-modal="false">
    <div class="content">
      <div class="name">
        <span>英文名: {{ ruleForm.userinfo.en_name }}</span> <span>真实姓名: {{ ruleForm.userinfo.realname }}</span>
      </div>

      <div class="radio">
        <el-radio-group v-model="radioType" @change="radioTypeChange">
          <el-radio label="1" size="large">汇总数据权限</el-radio>
          <el-radio label="2" size="large">个人账户的数据权限</el-radio>
          <el-radio label="3" size="large">账户自定义数据权限</el-radio>
          <el-radio label="4" size="large" class="role mt-[16px]">
            <div>角色数据权限：</div>
            <div class="role whitespace-normal">
              <el-tag class="mx-1 mb-1" :type="formLabelAlign.includes(item.id) ? '' : 'info'"
                :effect="formLabelAlign.includes(item.id) ? 'light' : 'plain'" size="large" :round="true"
                v-for="(item, index) in ruleForm.roles" @click.stop="selectRole(item.id)" :key="index">{{
                  item.role_name }}</el-tag>
            </div>
          </el-radio>
        </el-radio-group>
      </div>
      <el-cascader-panel ref="dataUser" v-model="data_user_ids" :options="options" :props="cascaderProps"
        class="cascaderPanel" />
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <VviewRoleAuthority ref="viewRoleAuthority" :formData="setData" @confirm="viewRoleAuthorityConfirm">
  </VviewRoleAuthority>
</template>
<script setup name="VRole">
import { organizationList } from "@/api/system/role"
import VviewRoleAuthority from './viewRoleAuthority.vue'
import { reactive, ref, toRefs, watch } from 'vue'
const dataUser = ref()
const viewRoleAuthority = ref()
const emits = defineEmits(['cancel', 'confirm'])
// 声明接收参数
const props = defineProps({
  title: {
    type: String,
    default: "数据权限分布"
  },
  formData: {
    type: Object,
    default: {}
  }
})
const data = reactive({
  deleteVisible: false,
  ruleForm: {
    userinfo: {
    }
  },
  loading: {},
  cascaderProps: {
    emitPath: false,
    multiple: true,
    label: 'name',
    value: 'id',
    children: 'sub'
  },
  options: [],
  radioType: '1',
  data_user_ids: [],
  refresh: true,
  setData: {},
  formLabelAlign: [],
  role_group_owner: []

})
const { deleteVisible, ruleForm, loading, cascaderProps, options, radioType, data_user_ids, refresh, setData, formLabelAlign, role_group_owner } = toRefs(data)
const { formData } = toRefs(props)
//选择角色
const selectRole = (id) => {
  if (radioType.value === '4') {
    if (formLabelAlign.value.includes(id)) {
      formLabelAlign.value = formLabelAlign.value.filter(e => e !== id)
      data_user_ids.value = []
      formLabelAlign.value.map(e => {
        role_group_owner.value.map(ec => {
          if (e === ec.id) {
            data_user_ids.value = data_user_ids.value.concat(ec.data_user_ids)
          }
        })
      })
    } else {
      formLabelAlign.value.push(id)
      role_group_owner.value.map(e => {
        if (e.id === id) {
          data_user_ids.value = data_user_ids.value.concat(e.data_user_ids)
        }
      })
    }
  }
}
//权限确认返回值
const viewRoleAuthorityConfirm = () => {
  ruleForm.value = {
    userinfo: {
    }
  }
  deleteVisible.value = false
  loading.value.saveEnable = false
  loading.value.save = false
}
//切换单选框
const radioTypeChange = (val) => {
  formLabelAlign.value = []
  switch (val) {
    case '1':
      data_user_ids.value = ruleForm.value.perm.data_user_ids
        .all
      break;
    case '2':
      data_user_ids.value = ruleForm.value.perm.data_user_ids
        .org_owner
      break;
    case '3':
      data_user_ids.value = ruleForm.value.perm.data_user_ids
        .user_owner
      break;
    case '4':
      role_group_owner.value = ruleForm.value.perm.data_user_ids.role_group_owner
      let arr = []
      role_group_owner.value.map(e => {
        arr = arr.concat(e.data_user_ids)
        formLabelAlign.value.push(e.id)
      })
      data_user_ids.value = arr
      break;
  }
  refresh.value = true
}
watch(() => formData.value, (newVal, oldVal) => {
  ruleForm.value = JSON.parse(JSON.stringify(newVal))
  radioTypeChange('1')
})
const open = async () => {
  await organizationList().then(res => {
    options.value = res.data
  })
  deleteVisible.value = true
}
const confirm = () => {
  setData.value = obj
  setData.value.userinfo = ruleForm.value.userinfo
  viewRoleAuthority.value.open()
}
const cancel = () => {
  radioType.value = '1'
  deleteVisible.value = false
  loading.value.save = false
  emits('cancel')
}
defineExpose({
  open, data, cancel
})
</script>
<style lang="scss" scoped>
.attribute {
  display: flex;
  height: 400px;
  overflow: auto;

  &:deep(.el-tree) {
    flex: 1;
  }
}

.content {
  align-items: center;

  .name {
    margin: 15px;

    span {
      margin-right: 20px;
    }
  }

  .radio {
    display: flex;
    padding: 0 15px 10px;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #f7f9fe;
  }

  span {
    margin-left: 5px;
  }

  .role {
    width: 100%;

    :deep(.el-radio__label) {
      display: flex;
      align-items: center;
    }
  }
}

.dialogName {
  font-size: 16px;
  font-weight: bold;
}

.cascaderPanel {
  overflow: auto;
  height: 400px;

  &:deep(.el-scrollbar__wrap) {
    height: 100% !important;
  }
}
:deep(.el-cascader-menu:last-child) {
  border-right: var(--el-cascader-menu-border);
}
:deep(.el-scrollbar__bar){
  display: block !important;
}
</style>